<template>
  <div class="vp-raw">
    <div class="flex flex-col content-center">
      <vue-okr-tree :data="testData" direction="vertical" node-key="id" show-collapsable></vue-okr-tree>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VueOkrTree } from 'vue-okr-tree-vue3'
import 'vue-okr-tree-vue3/dist/vue-okr-tree.css'
const testData = ref([
  {
    id: 1,
    label: 'xxx科技有有限公司',
    children: [
      {
        id: 2,
        label: '产品研发部',
        children: [
          {
            id: 3,
            label: '研发-前端',
          },
          {
            id: 4,
            label: '研发-后端',
          },
          {
            id: 5,
            label: 'UI 设计',
          },
        ],
      },
      {
        id: 6,
        label: '销售部',
        children: [
          {
            id: 7,
            label: '销售一部',
          },
          {
            id: 8,
            label: '销售二部',
          },
        ],
      },
      {
        id: 9,
        label: '财务部',
      },
    ],
  },
])
</script>
<style></style>
<style scoped>
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.content-center {
  justify-content: center;
}
</style>
